<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue单向数据流-父子组件间的数据传递</title>
</head>
<body>
  <script src="./js/vue2.js"></script>
  <div id="app">
    <!-- 父组件向子组件传值通过属性方式 -->
    <counter :count="0" @add="handleAdd"></counter>
    <counter :count="1" @add="handleAdd"></counter>
    <div>{{total}}</div>
  </div>
</body>
</html>
<script>

  // 局部组件
  var counter = {
    // 子组件接收父组件传值
    props: ['count'],
    data: function(){
      return {
        // 不能直接修改父组件传来的值，则使用一个变量来接收之后再修改
        number: this.count,
      }
    },
    template:`
      <div @click="handleClick">{{number}}</div>
    `,
    methods: {
      handleClick: function(){
        // 子组件不能随意修改父组件传递过来的参数
        this.number++;
        // 子组件向父组件传值通过事件的方式
        this.$emit('add', 1);
      }
    }
  }

  // 根实例
  var vm = new Vue({
    el: '#app',
    data: {
      total:1,
    },
    components: {
      counter: counter,
    },
    methods: {
      handleAdd: function(step){
        this.total += step; 
      }
    }
  });

  // 单向数据流： 父组件可以随意的向子组件传递参数，
  // 但是子组件不可以随意修改父组件传递过来的参数，
  // 因为可能会影响其他子组件的接收的复杂数据
</script>